<style lang="less">
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .row-left{
    text-align: center;
    // border-right: 1px solid lightgray;
    // background-color: #eeeef7;
  }
  .title{
    margin-bottom:10px;
    color: #1C86EE;
    font-size: 1rem;
    border-bottom: 1px solid orangered;
    font-size: 20px;
    color: coral;
  }
  .content{
    background-color:white;
    height: auto;
    border: 1px solid lightgray;
    padding: 0px;
  }
  .idCard{
    width: 170px;
    height: 80px;
    background-color: #79e428;
    position: absolute;
    right: 2%;
    top: 13%;
    color: white;
    font-size: 1.5rem;
    line-height: 80px;
    text-align: center;
  }
  .ivu-steps-item {
    display: initial;
    position: relative;
    vertical-align: initial;
  }
  .red-name{
    color: red
  }
  .step-item {
    float: left;
    margin-left: 0px;
  }
</style>
<template>
  <div style="background-color:white">
    <div style="">
      <Row class="title">
        <Col span="4" style="text-align: left;width:22%">专项救助</Col>
      </Row>
    </div>
    <div style="height:30px;">
      <Steps :current="0" size="small">
        <div @click="nextStep('0')" class="step-item">
          <Step title="个人临时救助有效信息" content=""></Step>
        </div>
        <div @click="nextStep('1')" class="step-item">
          <Step title="个人两节救助有效信息" content=""></Step>
        </div>
        <div @click="nextStep('2')" class="step-item">
          <Step title="个人采暖救助有效信息" content=""></Step>
        </div>
      </Steps>
    </div>
    <div class="content">
      <Table :columns="columns1" :data="data"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="data.length" :current="1" @on-change="changePage"></Page>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { createPostNew } from '@/api/eventlist'
export default {
  data () {
    return {
      url: '',
      str: '',
      // idcardNumber: this.$route.params.idcardNumber,
      idcardNumber: '371723198604123188',
      columns1: [
        {
          title: '被救助人姓名',
          key: 'ssda0001'
        },
        {
          title: '被救助人性别',
          key: 'ssda0002'
        },
        {
          title: '被救助人出生年月',
          key: 'ssda0003'
        },
        {
          title: '被救助人身份证',
          key: 'ssda0004'
        },
        {
          title: '户主姓名',
          key: 'ssda0005'
        },
        {
          title: '救助对象类别',
          key: 'ssda0010'
        },
        {
          title: '户口所在地',
          key: 'ssda0011'
        }
      ],
      data: []
    }
  },
  methods: {
    nextStep (step) {
      var params = {
        serialNumber: this.str,
        idcardNumber: this.idcardNumber
      }
      console.log(params)
      if (step === '1') {
        this.$router.push({
          name: 'tworescues',
          params: params
        })
      } else if (step === '2') {
        this.$router.push({
          name: 'heatingassistance',
          params: params
        })
      }
    },
    getReliefList () {
      var param1 = {
        'request_map': {
          'size': 10,
          'pageNo': 1,
          'sort': '',
          'order': ''
        },
        'headers_map': {
          'serialNumber': this.str,
          'idcardNumber': this.idcardNumber
        },
        'url': 'zxjz/queryTemporaryAssistanceInfo'
      }
      createPostNew(param1).then(res => {
        this.data = res.data.data.data.assistanceInfo
        console.log(res, '个人临时救助有效信息')
      })
    },
    changePage () {
      // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
      this.data = this.getReliefList()
    }
  },
  mounted () {
    let timestamp = new Date().getTime().toString()
    var str1 = Math.ceil(Math.random() * 10)
    var str2 = Math.ceil(Math.random() * 10)
    this.str = str1 + timestamp + str2
    console.log(this.str, this.idcardNumber)
    // 列表
    this.getReliefList()
  }
}
</script>
